<template>
  <view class="chat-header">
    <view class="header-left">
      <button class="back-btn" @click="$emit('back')">←</button>
      <view class="user-info">
        <text class="user-name">{{ userName || '聊天' }}</text>
        <text class="user-status" :class="isOnline ? 'online' : 'offline'">
          {{ isOnline ? '在线' : '离线' }}
        </text>
      </view>
    </view>
    <view class="header-right">
      <text class="conn-status" :class="['status-icon', connectionStatus]">
        {{ statusIcon }}
      </text>
      <button class="call-btn" @click="$emit('call')">📞</button>
      <button class="more-btn" @click="$emit('more')">⋯</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChatHeader',
  props: {
    userName: {
      type: String,
      default: '聊天'
    },
    isOnline: {
      type: Boolean,
      default: false
    },
    connectionStatus: {
      type: String,
      default: 'connected'
    }
  },
  computed: {
    statusIcon() {
      return this.connectionStatus === 'connected' ? '🟢' : 
             this.connectionStatus === 'reconnecting' ? '🟡' : '🔴'
    }
  }
}
</script>

<style scoped>
.chat-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.back-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.user-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.user-status {
  font-size: 20rpx;
}

.user-status.online {
  color: #52c41a;
}

.user-status.offline {
  color: #999;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.conn-status {
  font-size: 20rpx;
}

.call-btn,
.more-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #f5f5f5;
  border: none;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.call-btn:active,
.more-btn:active {
  background: #e8e8e8;
}
</style>

